<script setup lang="ts">
import { ref } from 'vue';
import { forward } from '@/utils/router';

const name = ref('aaaabbb');
const schooName = ref('');
const titles = ['身高', '职业', '学校', '头像'];
const index = ref(0);
const maxIndex = 4;
const percent = ref(0);
const jobs = ['互联网', '金融', '制造业'];
const hights = [130, 135, 140, 145, 150, 155, 160, 165, 170, 175, 180, 185];
const columns = [];
hights.reverse().forEach((v) => {
  columns.push({ text: v, value: v });
});
const jobCols = [];
jobs.forEach((v) => {
  jobCols.push({ text: v, value: v });
});

const onConfirm = ({ selectedValues }) => {
  console.log(33);
  // showToast(`当前值: ${selectedValues.join(',')}`);
};
const onChange = ({ selectedValues }) => {
  console.log(22);
  // showToast(`当前值: ${selectedValues.join(',')}`);
};

function goTest() {
  forward('test', {
    a: 1
  });
}
name.value = titles[index];

function prev() {
  if (index.value <= 0) {
    return;
  }
  index.value--;
  const indexNum = index.value;
  percent.value = ((indexNum + 1) / maxIndex) * 100;
  console.log(percent);
  name.value = titles[indexNum];
  console.log(titles[indexNum]);
}

function next() {
  index.value++;
  const indexNum = index.value;
  percent.value = ((indexNum + 1) / maxIndex) * 100;
  console.log(percent);
  name.value = titles[indexNum];
  console.log(titles[indexNum]);
}

function change() {
  console.log('xxx');
}
</script>

<template>
  <view class="content">
    <view class="percent">
      <van-progress :percentage="percent" />
    </view>
    <view class="title">
      <text class="title">{{ name }}</text>
    </view>
    <view v-show="index === 2" class="school">
      <!-- 可以使用 CellGroup 作为容器 -->
      <van-cell-group inset>
        <van-field v-model="schooName" label="" placeholder="请输入学校名" />
      </van-cell-group>
    </view>
    <div v-show="index === 0" class="jo">
      <van-picker
        title="身高"
        :columns="columns"
        :show-toolbar="false"
        @confirm="onConfirm"
        @change="onChange"
      />
    </div>
    <div v-show="index === 1" class="jo">
      <van-picker
        title="职业"
        :columns="jobCols"
        :show-toolbar="false"
        @confirm="onConfirm"
        @change="onChange"
      />
    </div>
    <view class="nextStep">
      <van-button type="primary" @click="prev">上一步</van-button>
      <van-button type="primary" @click="next">下一步</van-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.percent {
  width: 90%;
  margin-bottom: 30px;
}
.content {
  padding: 30px;
  .school {
    margin-top: 20px;
  }
  .nextStep {
    margin-top: 40px;
  }
}
.logo {
  margin-left: auto;
  margin-right: auto;
  margin-top: 200rpx;
  margin-bottom: 50rpx;
  width: 200rpx;
  height: 200rpx;
}
.text-area {
  display: flex;
  justify-content: center;
}
.title {
  font-size: 36rpx;
  color: #8f8f94;
  text-align: left;
  font-weight: bold;
}
</style>
